import { defineComponent, onMounted, ref } from "vue";
import style from "./index.module.less";
import { expandMoreProps } from "./types";
import CardView from "../CardView";
export default defineComponent({
  name: "",
  props: expandMoreProps,
  setup(_, { slots, emit }) {
    const childNum = ref(_.number);
    const childLength = ref(0);
    onMounted(() => {
      const children = slots.default?.();
      if (children!.length > 0) {
        childLength.value = children!.length;
      }
    });
    const renderChildren = () => {
      const children = slots.default?.();
      if (children) {
        return children.slice(0, childNum.value);
      } else {
        return null;
      }
    };
    const renderMore = () => {
      if (childLength.value <= childNum.value) return null;
      return (
        <div
          class="flex items-center justify-center !mb-[0px] blue-text"
          onClick={() => emit("click")}
          // onClick={() => (childNum.value = childLength.value)}
        >
          查看更多
        </div>
      );
    };
    return () => {
      return (
        <CardView class="transition-all ">
          {renderChildren()}
          {renderMore()}
        </CardView>
      );
    };
  },
});
